<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{courseName}}</span>
      <el-button style="float: right; padding: 3px 0" type="info" @click="addSection">
        <i class="el-icon-plus"></i>添加章节
      </el-button>
    </div>
    <div class="section">
      <el-tree :data="data" node-key="id"
        :expand-on-click-node="false" :props="defaultProps">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="actions">
            <!-- 课时菜单 -->
            <span v-if="data.sectionId" class="lesson">
              <el-button size="mini" @click="editLesson(data, node)">
                编辑
              </el-button>
              <el-button type="success" size="mini" @click="uploadVideo(data)" disabled>
                上传视频
              </el-button>
              <el-button size="mini" @click="stateLesson(data,$event)">
                {{ parseState(data.status) }}
              </el-button>
            </span>
            <!-- 章节菜单 -->
            <span v-else class="section">
              <el-button size="mini" @click="editSection(data)">
                编辑
              </el-button>
              <el-button type="primary" size="mini" @click="addLesson(data)">
                添加课时
              </el-button>
              <el-button size="mini" @click="stateSection(data,$event)">
                {{ parseState(data.status) }}
              </el-button>
            </span>
          </span>
        </span>
      </el-tree>
    </div>
    <el-dialog title="章节信息" :visible.sync="dialogSectionVisible">
      <el-form :model="sectionForm">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-input v-model="sectionForm.courseName" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="章节名称" :label-width="formLabelWidth">
          <el-input v-model="sectionForm.sectionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节描述" :label-width="formLabelWidth">
          <el-input v-model="sectionForm.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节排序" :label-width="formLabelWidth">
          <el-input v-model="sectionForm.orderNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSectionVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSection">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="课时信息" :visible.sync="dialogLessonVisible">
      <el-form :model="lessonForm">
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-input v-model="courseName" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="章节名称" :label-width="formLabelWidth">
          <el-input v-model="sectionSelected.sectionName" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="课时名称" :label-width="formLabelWidth">
          <el-input v-model="lessonForm.theme" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="时长" :label-width="formLabelWidth">
          <el-input type="number"
            v-model="lessonForm.duration" autocomplete="off" :min="0"></el-input>
        </el-form-item>
        <el-form-item label="是否开放试听" :label-width="formLabelWidth">
          <el-switch v-model="lessonForm.isFree" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="课时排序" :label-width="formLabelWidth">
          <el-input v-model="lessonForm.orderNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLessonVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateLesson">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogStateVisible" class="status-dialog">
      <el-form :model="stateSelected">
        <div class="info">
            <i class="el-icon-info"></i>
            <span>当前状态：{{stateSelected.label}}</span>
        </div>
        <el-form-item label="状态变更为" :label-width="formLabelWidth">
          <el-select v-model="stateSelected.status" placeholder="请选择">
            <el-option v-for="item in options"
              :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateState">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
// eslint-disable-next-line
import { getSections,getBySectionId,getCourseById,UpdateSection,getLessonById,UpdateLesson } from '@/services/course';

export default {
  name: 'SectionEdit',
  props: {
    id: [String, Number],
  },
  data() {
    return {
      courseName: '',
      data: [],
      defaultProps: {
        children: 'lessonDTOS',
        label: this.parseLable,
      },
      sectionForm: null,
      initSectionForm: {
        courseId: parseInt(this.id, 10),
        courseName: '',
        sectionName: '',
        description: '',
        orderNum: 0,
      },
      lessonForm: null,
      initLessonForm: {
        courseId: parseInt(this.id, 10),
        courseName: '',
        theme: '',
        duration: 0,
        isFree: false,
        orderNum: 0,
      },
      sectionSelected: {
        sectionName: '',
        sectionId: 0,
      },
      stateSelected: {
        status: -1,
      },
      options: [
        { value: 0, label: '已隐藏' },
        { value: 1, label: '待更新' },
        { value: 2, label: '已更新' },
      ],
      dialogSectionVisible: false,
      dialogLessonVisible: false,
      dialogStateVisible: false,
      formLabelWidth: '120px',
    };
  },
  watch: {
    id(val) {
      this.initSectionForm.courseId = val;
      this.initLessonForm.courseId = val;
    },
    courseName(val) {
      this.initSectionForm.courseName = val;
      this.initLessonForm.courseName = val;
    },
  },
  methods: {
    async loadCourse() {
      const { data } = await getCourseById({ courseId: this.id });
      if (data.code === '000000') {
        this.courseName = data.data.courseName;
      }
    },
    async loadSections() {
      const { data } = await getSections({ courseId: this.id });
      if (data.code === '000000') {
        this.data = data.data;
      } else {
        this.$message.error('章节加载失败');
      }
    },
    parseLable(data) {
      return data.theme || data.sectionName;
    },
    parseState(status) {
      let info = '';
      const found = this.options.find((ele) => ele.value === status);
      if (found) {
        info = found.label;
      } else {
        info = '状态';
      }
      return info;
    },
    // 章节操作
    addSection() {
      this.sectionForm = { ...this.initSectionForm };
      this.dialogSectionVisible = true;
    },
    async editSection(rowData) {
      const { data } = await getBySectionId(rowData.id);
      if (data.code === '000000') {
        this.sectionForm = data.data;
        this.sectionForm.courseName = this.initSectionForm.courseName;
        this.dialogSectionVisible = true;
      } else {
        this.$message.error('章节加载失败');
      }
    },
    async updateSection() {
      const { data } = await UpdateSection(this.sectionForm);
      if (data.code === '000000') {
        this.$message.success('章节更新成功');
        this.dialogSectionVisible = false;
        this.loadSections();
      } else {
        this.$message.error('章节更新失败');
      }
    },
    // 课时操作
    async editLesson(rowData, node) {
      const { data } = await getLessonById(rowData.id);
      if (data.code === '000000') {
        this.sectionSelected.sectionName = node.parent.data.sectionName;
        this.sectionSelected.sectionId = node.parent.data.id;
        this.lessonForm = data.data;
        this.dialogLessonVisible = true;
      } else {
        this.$message.error('课程信息加载失败');
      }
    },
    addLesson(rowData) {
      this.lessonForm = { ...this.initLessonForm };
      this.sectionSelected.sectionName = rowData.sectionName;
      this.sectionSelected.sectionId = rowData.id;
      this.dialogLessonVisible = true;
    },
    async updateLesson() {
      const formData = this.lessonForm.id
        ? this.lessonForm : { ...this.sectionSelected, ...this.lessonForm };
      const { data } = await UpdateLesson(formData);
      if (data.code === '000000') {
        this.$message.success('课时信息更新成功');
        this.dialogLessonVisible = false;
        this.loadSections();
      } else {
        this.$message.error('课时信息更新失败');
      }
    },
    // 更新状态
    stateSection(rowData, event) {
      this.stateSelected = {
        status: rowData.status, sectionID: rowData.id, label: event.target.textContent,
      };
      this.dialogStateVisible = true;
    },
    stateLesson(rowData, event) {
      this.stateSelected = {
        status: rowData.status, lessonID: rowData.id, label: event.target.textContent,
      };
      this.dialogStateVisible = true;
    },
    async updateState() {
      if (this.stateSelected.sectionID) {
        const { data } = await UpdateSection({
          id: this.stateSelected.sectionID, status: this.stateSelected.status,
        });
        if (data.code === '000000') {
          this.$message.success('章节状态更新成功');
        } else {
          this.$message.error('章节状态更新失败');
          return;
        }
      } else if (this.stateSelected.lessonID) {
        const { data } = await UpdateLesson({
          id: this.stateSelected.lessonID, status: this.stateSelected.status,
        });
        if (data.code === '000000') {
          this.$message.success('课时状态更新成功');
        } else {
          this.$message.error('课时状态更新失败');
          return;
        }
      }
      this.dialogStateVisible = false;
      this.loadSections();
    },
  },
  created() {
    this.loadCourse();
    this.loadSections();
    this.sectionForm = { ...this.initSectionForm };
    this.lessonForm = { ...this.initLessonForm };
  },
};
</script>
<style scoped>
::v-deep .el-tree-node__content {
  margin: 5px 10px;
}
.custom-tree-node {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
.status-dialog .info {
  text-align: center;
  font-size: 20px;
  margin-bottom: 50px;
}
.status-dialog .info i {
  display: block;
  font-size: 100px;
  margin-bottom: 50px;
}
</style>
